@extends('layouts.header')
@section('title','选择柜机')
<div class="selectGrid">
    <div class="grid">
        <div class="gridListTitle">当前空闲格子</div>
        <div class="gridList" id="gridList">
            @foreach($grips as $grip)
                <div class="items" data-num="{{$grip->id}}">{{$grip->grip_number}}</div>
            @endforeach
            <div class="kong"></div>
            <div class="kong"></div>
            <div class="kong"></div>
        </div>
    </div>
    <div class="sub">
          @if($user->deposit == '0')
              <a href="{{route('user.deposit')}}">
                  <button id="submit">开始使用</button>
              </a>
          @else
              <a href="{{route('user.orderDetail')}}">
                  <button id="submit">开始使用</button>
              </a>
          @endif

    </div>
</div>
<!-- 没有空闲格口 -->
{{--<div class="noSelectGrid">
    <img src="{{asset('icon/shebiewikdonxi@2x.png')}}" alt="">
    <p>当前设备无空闲格口，请选择其他设备</p>
</div>--}}
@push('js')
    <script>
        var obj = new MyOjb();
        function MyOjb(){
            this.grid = null;
        }
        $("#gridList .items").click(function(){
            var num = $(this).attr("data-num");
            obj.grid = num;
            $(this).addClass("active").siblings().removeClass("active");
        });

        $("#submit").click(function(){
            if (obj.grid == null || obj.grid == undefined) {
                mui.alert("请选择空闲格口", "提示", "确认");
                return false;
            } else {

                //loding 显示
                $("#isShow").show();
                $.ajax({
                    url: "",
                    type: "POST",
                    data: obj,
                    success: function(res){

                    }
                });
            }
        });
    </script>
@endpush